<template>
  <div class="header">
     <div class="header-left"><i class="iconfont iconarrow-left-bold"></i></div>
     <div class="header-input"><i class="iconfont iconsearch"></i>输入景点</div>
    <router-link to="/city">
      <div class="header-right">{{this.city}}<i class="iconfont iconarrow-down-filling"></i></div>
    </router-link>
     </div>
</template>

<script>
import {mapGetters, mapState,} from 'vuex'
export default {
    name:'HomeHeader',
    components:{
      
    },
    computed:{
      ...mapState(['city']),
      ...mapGetters(['dob'])
    },
    data(){
      return{
      }
    },
    mounted(){

    },
    methods:{

    },
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
    height .86rem
    background $bgColor
    display flex
    align-items center
    .header-left
        width 0.34rem
        float left
        color #fff
        margin-left .1rem
    .header-input
      flex 1
      height .64rem
      line-height .64rem
      background #ffffff
      border-radius .1rem
      margin auto 0.2rem
      color #ccc
    .header-right
      min-width 1.04rem
      padding .1rem
      float right
      color #fff
</style>


